<template>
    <transition name="slide-down">
        <div class="title-wrapper" v-show="ishow">
          <div class="left">
              <span class="iconfont icon">&#xe6bc;</span>
          </div>
          <div class="right">
              <div class="icon-wrapper">
                  <span class="iconfont icon">&#xe7bd;</span>
              </div>
               <div class="icon-wrapper">
                  <span class="iconfont icon">&#xe68b;</span>
              </div>
               <div class="icon-wrapper">
                  <span class="iconfont icon">&#xe600;</span>
              </div>
          </div>
        </div>
      </transition>
</template>

<script>
export default {
    name:'Titlebar',
    props:{
        ishow:{
            type:Boolean,
            default:false
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../assets/style/global';
.title-wrapper{
        position: absolute;
        top:0;
        left:0;
        z-index: 101;
        width:100%;
        height: px2rem(48);
        background: #fff;
        display:flex;
        box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.171);
        // box-shadow: 0 px2em(8) px2em(8) rgba(0,0,0,.15);
        .left{
           flex: 0 0 px2rem(48);
           @include center;
        }
        .right{
            flex:1;
            display:flex;
            justify-content: flex-end;
            .icon-wrapper{
                flex: 0 0 px2rem(40);
                @include center;
            }
        }
    }
</style>